// 自定义指令
// 字符串处理
const tools = {
    toUpperCase:{ //字母转大写
      mounted(el) {
        el.addEventListener('input', (event) => {
          const input = event.target;
          let value = input.value;
    
          // 只允许输入数字、字母和文字
          value = value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '');
    
          // 将字母转换为大写
          value = value.toUpperCase();
    
          // 更新输入框的值
          input.value = value;
    
          // 触发 input 事件，确保 v-model 更新
          input.dispatchEvent(new Event('input'));
        });
      }
       
    },
    toLowerCase:{ //字母转小写
        mounted(el) {
            el.addEventListener('input', (event) => {
              const value = event.target.value;
              if (value === '') {
                event.target.value = ''; // 如果输入为空，保持为空
              } else {
                event.target.value = value.toLowerCase(); // 将输入转换为小写
              }
            });
        }
    },
    toTrim:{ //去除字符串空格
      mounted(el) {
          el.addEventListener('input', (event) => {
            const value = event.target.value;
            if (value === '') {
              event.target.value = ''; // 如果输入为空，保持为空
            } else {
              event.target.value = value.trim(); // 字符串两端去空格
                
            }
          });
      }
    },
    toCommaE:{ //中文逗号转英文逗号
      mounted(el){
        el.addEventListener('input', (event) => {
          const value = event.target.value;
          if(value === ''){
            event.target.value = ''; // 如果输入为空，保持为空
          }else{
            event.target.value = value.replace(/，/g, ',');
          }
        });
      }
    },
    toCommaC:{ //英文逗号转中文逗号
      mounted(el){
        el.addEventListener('input', (event) => {
          const value = event.target.value;
          if(value === ''){
            event.target.value = ''; // 如果输入为空，保持为空
          }else{
            event.target.value = value.replace(/,/g, '，');
          }
        });
      }
    },
    toAlphanumeric:{ //只允许字母和数字
      mounted(el: HTMLElement & { value?: string }) {
        // 处理 input 元素或 el-input 组件
        const input = el.tagName.toLowerCase() === 'input' ? el : el.querySelector('input');

        if (input) {
          // 初始化设置值（如果绑定有值），只保留字母数字
          if (input.value) {
            input.value = input.value.replace(/[^a-zA-Z0-9]/g, '');
          }

          // 监听输入事件并处理只允许字母和数字
          input.addEventListener('input', (event) => {
            const target = event.target as HTMLInputElement;
            // 过滤非字母数字字符
            target.value = target.value.replace(/[^a-zA-Z0-9]/g, '');

            // 触发 Vue 的 v-model 更新
            const inputEvent = new Event('input', { bubbles: true });
            target.dispatchEvent(inputEvent);
          });
        }
      },
      // updated(el: HTMLElement & { value?: string }) {
      //   const input = el.tagName.toLowerCase() === 'input' ? el : el.querySelector('input');
      //   if (input && input.value !== el.value) {
      //     input.value = (el.value || '').replace(/[^a-zA-Z0-9]/g, '');
      //   }
      // }
    }
  }
  export default tools

